<template>
	<div>
		<!-- logo -->
		<img v-if="!curImg" src="../assets/logo1.png" class="logo">

		<!-- firstTitle -->
		<img v-if="firstStart" src="../assets/title.png" class="firstTitle">
		
		<!-- 设置 -->
		<div class="setPath">
			<img src="../assets/set.png" title="设置文件路径" @click="setPath">
		</div>
		
		<section :style="isDir.length>0&&!curImg?'height: 100vh':'height:0'">
			<!-- title -->
			<img v-if="isDir.length>0" src="../assets/title.png" class="title">
			
			<!-- loading -->
			<h2 v-if="loading" style="color:#000">加载中...</h2>

			<!-- 文件夹按钮 -->
			<div class="filePathBtnBox" v-if="isDir.length>0" v-show="!curImg">
				<div class="btnBox" v-for="(dir,index1) in isDir" :key="'dir'+index1">
					<button :data-filedir="dir.filedir" @click="fileClick">{{dir.filename}}</button>
				</div>
			</div>
		</section>
		
		<!-- 返回按钮 -->
		<div class="returnBtn" v-if="history.length>1" v-show="!curImg" @click="back">
			<img src="../assets/return.png">
		</div>

		<!-- 图片列表 -->
		<div v-if="isFile.length>0" v-show="!curImg&&!curVdo" class="swiper-container">
			<div class="swiper-wrapper" :style="isFile.length==1?'transition-duration: 0ms; transform: translate3d(40vw, 0px, 0px);':''">
				<div v-for="(file,index2) in isFile" :key="'file'+index2" @click="showImg" class="swiper-slide" :style="isFile.length==1?'width:20vw':''">
					<p>{{file.filename}}</p>
					<img :src="file.filedir">
					<div class="layer-mask" :style="isFile.length==1?'display:none':''"></div>
				</div>
			</div>
		</div>
		
		<!-- 图片展示 -->
		<div v-show="curImg">
			<div class="returnBtn" @click="curImgBack">
				<img src="../assets/return.png">
			</div>
			<img :src="curImg" width="100%" height="auto">
		</div>
		
		<!-- 视频展示 -->
		<div v-if="curVdo" style="width: 100%;position: absolute;top: 0;z-index: 9999;">
			<div class="returnBtn" @click="curImgBack">
				<img src="../assets/return.png">
			</div>
			<video :src="curVdo" style="height:50vh;margin-top:25vh" autoplay controls />
		</div>
	</div>
</template>

<script>
/* 如下引用需要在public/index.html中添加 var NODE = require; */
const $electron  = NODE('electron');
const $ipcRender = $electron.ipcRenderer;	//文件选择窗口
const $path = NODE('path');
const $fs = NODE('fs');
import Swiper from 'swiper';

export default {
	name: 'ymyq',
	data(){
		return {
			staticPath:null,
			fileArr:[],
			history:[],
			curImg:null,
			curVdo:null,
			loading:false,
			firstStart:false,
			input:null
		}
	},
	mounted(){
		//配置文件路径input创建
		let self = this
		this.input = document.createElement('input')
		this.input.setAttribute('type','file')
		this.input.setAttribute('webkitdirectory','')
		this.input.setAttribute('directory','')
		this.input.addEventListener("change",(ev)=>{
			let dirPath = ev.path[0].files[0].path
			let data = JSON.stringify({
				dirPath,
				updateTime:new Date().toLocaleDateString()
			})
			self.fileRead(dirPath)
			//改变首次状态
			self.firstStart = false
			//配置文件存储
			try{
				$fs.writeFileSync($path.resolve('./')+'/config.json',data,'utf8');
				self.staticPath = dirPath
				self.history = []	//清空历史
			}catch(e){
				alert(JSON.stringify(e))
			}
		})
		//读取配置文件
		try{
			let configData = $fs.readFileSync($path.resolve('./')+'/config.json','utf-8');
			this.staticPath = JSON.parse(configData).dirPath
			//文件遍历
			this.fileRead(this.staticPath)
		}catch(e){
			if(e.toString().includes('no')){
				this.firstStart = true
			}
		}
	},
	computed:{
		isDir(){	//过滤出文件夹
			let _fileArr = this.fileArr.filter(item=>!item.isFile)
			return _fileArr.sort(function(m,n){return m.filename.localeCompare(n.filename)})	//排序
		},
		isFile(){	//过滤出文件
			let _fileArr = this.fileArr.filter(item=>item.isFile)
			return _fileArr.sort(function(m,n){return m.filename.localeCompare(n.filename)})	//排序
		}
	},
	methods:{
		setPath(){ //设置文件路径
			//模拟文件夹选择对话框
			this.input.click()
		},
		fileClick(ev){
			this.loading = true	//loading
			let staticPath = ev.target.dataset.filedir
			this.fileRead(staticPath)
			this.curImg = null
			this.curVdo = null
		},
		back(){
			if(this.history.length<2) return;
			this.fileArr = this.history[this.history.length-2]
			this.history.splice(this.history.length-1, 1)
			if(this.isFile.length>0) this.loadGallery()
			this.curImg = null
			this.curVdo = null
		},
		curImgBack(){
			this.curImg = null
			this.curVdo = null
		},
		loadGallery(){	//懒加载图片列表动画
			var swiper = new Swiper('.swiper-container',{
				slidesPerView: 5,
				spaceBetween: 30,
				centeredSlides: true,
				observer:true,  //修改swiper自己或子元素时，自动初始化swiper    
				observeParents:true,  //修改swiper的父元素时，自动初始化swiper
				onSlideChangeEnd: function(swiper){ 
					swiper.update();  //更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper；
					swiper.startAutoplay();  //重新开始自动切换；
					swiper.reLoop();  //重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上；
				}
			});
		},
		showImg(ev){
			let srcImg = ev.srcElement.currentSrc
			//视频、图片区分
			if(srcImg.slice(srcImg.lastIndexOf("/")+1)[0]=="v"){
				this.curVdo = srcImg.slice(0,srcImg.lastIndexOf("."))+".mp4"
			}else{
				this.curImg = srcImg
			}
		},
		fileRead(filePath){	//文件遍历
			let _this = this
			$fs.readdir(filePath,(err,files)=>{
				if(err){
					console.warn(err)
				}else{
					_this.fileArr = []
					files.forEach(filename=>{
						//绝对路径
						var filedir = $path.join(filePath, filename);
						//获取文件类型
						$fs.stat(filedir,function(err, stats){
							if(err){
								console.warn('获取文件类型失败',err);
							}else{
								//判断是文件还是文件夹
								let isFile = stats.isFile();//是文件
								//var isDir = stats.isDirectory();//是文件夹
								if(isFile && (filename.includes(".jpg") || filename.includes(".png"))){
									_this.fileArr.push({
										filename:filename.split('.')[0],
										filedir,
										isFile
									})
								}else if(!isFile){
									_this.fileArr.push({
										filename:filename,
										filedir,
										isFile
									})
								}
								if(_this.isFile.length>0) _this.loadGallery()	//加载图片列表动画
							}
						})
					})
					//如果历史记录中没有，则存入历史记录
					if(!_this.history.includes(_this.fileArr)) _this.history.push(_this.fileArr)
					_this.loading = false	//loading
				}
			})
		}
	}
}
</script>

<style lang="scss">
	@font-face{
		font-family: '方正魏碑简体'; 
		src: url('../assets/方正魏碑简体.ttf') format('truetype');
	}
	 /* 设置滚动条的样式 */
	::-webkit-scrollbar{
			width: 10px;
	}
	/*滚动槽*/
	::-webkit-scrollbar-track{
			-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3) ;
			border-radius: 10px;
	}
	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background: rgba(0, 0, 0, 0.1);
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
	}
	::-webkit-scrollbar-thumb:window-inactive {
			background: rgba(255, 0, 0, 0.4);
	}
	.logo{
		position: absolute;
		top:6vh;
		left:4vw;
		width: 20vw;
	}
	h1.toptitle{
		margin-top: 19vh;
		font-family: "方正魏碑简体";
		font-size:6vw!important;
		letter-spacing: 1.2vw;
	}
	img.firstTitle{
		position: absolute;
		top: calc(21vh + 6vw);
		width: 70vw;
		left:15vw;
	}
	section{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
	img.title{
		width: 50vw;
	}
	.setPath{
		transition: .3s;
		position: fixed;
		left: -5vw;
		top: -5vw;
		width: 8vw;
		height: 8vw;
		transform: rotate(45deg);
		background: #000;
		cursor: pointer;
		opacity: 0;
		&:hover{
			opacity: 1;
			left: -4vw;
			top: -4vw
		}
		img{
			margin-top: 35%;
			margin-left: 60%;
			width: 30%;
			height:auto;
		}

	}
	.filePathBtnBox{
		margin-top: 30px;
		width: 80vw;
		left: 10vw;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		.btnBox{
			display: inline-block;
			width: calc(70vw * 0.17);
			height: calc(70vw * 0.17);
			border-radius: 50%;
			border: 1px solid #000;
			margin: 5px 3vw;
			button{
				width: calc(100% - 6px);
				height:calc(100% - 6px);
				background: transparent;
				margin: 3px;
				border-radius: 50%;
				border: 2px solid #000;
				font-family: "方正魏碑简体";
				font-size:2.4vw;
				overflow: hidden;
				cursor: pointer;
				&:focus{
					outline: none;
				}
			}
		}
	}
	.returnBtn{
		position: fixed;
		right: 10px;
		bottom: 10px;
		width:4vw;
		height:4vw;
		background: #fff;
		border-radius: 50%;
		cursor: pointer;
		z-index: 999;
		img{
			width:100%;
			height:auto;
		}
	}
	#gallery{
		position:absolute;
		left:0; top:0;
		height:100%;
		display:flex;
		align-items:stretch;
		margin:0 25%;
	}
	.hb {
		position:relative;
		width:25%;
		z-index:1;
		display:flex;
		align-items:center;
		z-index:2;
		trasnform:scale(.97);
		cursor: pointer;
	}
	.c{
		position:relative;
		display:block;
		max-width:90%;
		height: 40vh;
		overflow: hidden;
	}
	.c img {
		position:relative;
		display:block;
		width:100%;
		height:auto;
		z-index:2;
	}
	.txt {
		font-family: "方正魏碑简体";
		font-size: 2vw;
		position:absolute;
		top:30vh;
		left:5%;
		width:90%;
		opacity:0;
		border-left:2px solid;
		z-index:1;
		transform:scaleY(1) translateY(0);
		transition:transform .2s, opacity .5s;
	}
	h1 {
		font-size:1.2em;
		font-weight:700;
		text-transform:uppercase;
	}
	.hb:hover .txt {
		opacity:1;
		transform:scaleY(1) translateY(-6vw);
	}
</style>

